import React, { Component } from 'react';
import { NavLink, withRouter } from 'react-router-dom'

import header from '../css/Header.module.css'
class Header extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            display_name: 'none',
            display_name1: 'none',
            display_name2: 'none',
            display_name3: 'block',
            display_name4: 'block',
        }
    }
    //判断登录
    componentDidMount() {
        let token = localStorage.getItem('token')
        // console.log(token)
        if (token) {
            this.setState({
                display_name2: 'block',
                display_name3: 'none',
                display_name4: 'none',
            })
            let userName = localStorage.getItem('userName')
            // console.log(userName)
            let span = document.getElementById('span')
            span.innerHTML = userName
        }
    }
    //退出
    tui() {
        localStorage.removeItem('token')
        this.props.history.push('./Login')
    }
    display_name() {
        if (this.state.display_name === 'none') {
            this.setState({
                display_name: 'block',
            })
        } else if (this.state.display_name === 'block') {
            this.setState({
                display_name: 'none',
            })

        }
    }
    display_name1() {
        if (this.state.display_name1 === 'none') {
            this.setState({
                display_name1: 'block',
            })
        } else if (this.state.display_name1 === 'block') {
            this.setState({
                display_name1: 'none',
            })

        }
    }
    render() {
        return (
            <div className={header.div}>
                <nav className={header.nav1}>
                    <div className={header.nav1_1}>
                        <img className={header.limg} src={require('../img/logo.png')} alt="" />
                        <ul className={header.hul}>
                            <li className={header.helpl} onClick={this.display_name.bind(this)}>
                                帮助
                                <div className={header.help} style={{ display: this.state.display_name }}>
                                    <ul>
                                        <li><NavLink>更改您的预定</NavLink></li>
                                        <li><NavLink>常见问题解决</NavLink></li>
                                        <li><NavLink>联系我们</NavLink></li>
                                        <li><NavLink>网站反馈</NavLink></li>
                                    </ul>
                                </div>
                            </li>
                            <li>您的订单</li>
                            <li><NavLink to="/Register" className={header.a} style={{ display: this.state.display_name3 }}>注册账号</NavLink></li>
                            <li><NavLink to="/Login" className={header.a} style={{ display: this.state.display_name4 }}>登录</NavLink></li>
                            <li className={header.user} style={{ display: this.state.display_name2 }}>
                                <span onClick={this.display_name1.bind(this)} id="span"></span>
                                <div className={header.user1} style={{ display: this.state.display_name1 }}>
                                    <ul>
                                        <li><NavLink>您的帐户</NavLink></li>
                                        <li><NavLink>您的订单</NavLink></li>
                                        <li><NavLink>收藏</NavLink></li>
                                        <li><NavLink>您的奖励</NavLink></li>
                                        <li><NavLink>点评住宿</NavLink></li>
                                        <li onClick={this.tui.bind(this)}><NavLink>退出</NavLink></li>
                                    </ul>
                                </div>
                            </li>

                            {/*  */}

                        </ul>
                    </div>
                </nav>
                <nav className={header.nav2}>
                    <div className={header.nav2_1}>
                        <ul>
                            <li><NavLink>优惠促销</NavLink></li>
                            <li><NavLink>新手上路</NavLink></li>
                            <li><NavLink>发布您的住宿</NavLink></li>
                            <li><NavLink>Hotels.com™ 好订网奖励</NavLink></li>
                        </ul>
                    </div>
                </nav>
            </div >
        )
    }
}
export default withRouter(Header)